<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图灵聊天机器人</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<style>
		* {
			margin:0;
			padding: 0;
		}
		html,body {
			font-size: 10px;
			font-family: "Microsoft Yahei";
		}
		.clearfix {
			*zoom:1;
			/* 
			*   hack 浏览器
			*   hack  针对不同的浏览器设置不同的样式
			*   *星号表示ie7及以下版本
			*   _下划线 ie6
			*/
		}
		.clearfix:after {
			/*
			* 万能清浮动
			* 用在浮动元素的直接父级的class
			 */
			content:"";
			clear:both;
			display: block;
			visibility: hidden;
			font-size: 0;
		}
		h1 {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 44px;
			line-height: 44px;
			color:#fff;
			background-color: blue;
			text-align: center;
			font-size: 1.8rem;
		}
		#inputBox {
			height: 44px;
		}
		#inputBox > div {
			background-color: #fff;
			position: fixed;
			width:92%;
			padding: 0 4%;
			height: 44px;
			left:0;
			bottom:0;
			border-top:1px solid #d9d9d9;
		}
		#inputBox input, #inputBox a {
			float: left;
			box-sizing:border-box;
		}
		#inputBox input {
			border:none;
			outline: none;
			padding: 5px 8px;
			border:1px solid #999;
			border-radius: 4px;
			font-size: 1.6rem;
			margin-top: 6px;
			width:80%;
		}
		#inputBox a {
			width:16%;
			height: 30px;
			background-color: blue;
			border-radius: 4px;
			line-height: 30px;
			text-align: center;
			color:#fff;
			font-size: 1.6rem;
			margin-top: 6px;
			margin-left: 2%;
			text-decoration: none;
		}

		#content {
			font-size: 1.4rem;
			padding: 4%;
			margin-top: 44px;
		}
		#content .user div{
			text-align: right;
		}
		#content .msg {
			margin:8px 0;
			display: inline-block;
			background-color: #f0f0f0;
			padding: 4px 8px;
			border-radius: 4px;
		}
	</style>
</head>
<body>
	<h1>图灵聊天机器人</h1>
	<div id="content">
		<!-- <div class="robot">
			<div>
				<p>图灵聊天机器人说：</p>
				<div class="msg">
					Lorem ipsum dolor.lorem
				</div>
			</div>
		</div>
		<div class="user">
			<div>
				<p>我说：</p>
				<div class="msg">
					Lorem ipsum dolor.
				</div>
			</div>
		</div> -->
	</div>
	<div id="inputBox" class="clearfix">
		<div>
			<input type="text" id="input">
			<a href="javascript:void(0);" id="sendBtn">发送</a>
		</div>
	</div>
	
	<script type="text/javascript" src="./js/jquery-2.0.0.min.js"></script>
	<script>
	var content = $("#content");//内容展示元素
	var input   = $("#input"); //输入框
	var sendBtn = $("#sendBtn"); //发送按钮

	
	// sendAjax为发起ajax请求函数
	function sendAjax() {
		var txt = $.trim(input.val()); //去掉首尾空格
		if(!txt)return;//值空时，退出请求
		dialogUser(txt);
		// 1. 接口地址 http://www.tuling123.com/openapi/api?key=fb6b7bcfbe52fccdb7f5d752a3088f75&info=天气&userid=1234
		// 其中key为应用key值
		// info为关键字
		$.ajax({
			url: "http://www.tuling123.com/openapi/api",//请求接口
			data: {//请求参数
				key: "fb6b7bcfbe52fccdb7f5d752a3088f75",
				info: txt,
				userid: 1234
			},
			dataType: "json", //返回数据
			success: function(response) {
				//2. 成功回调函数
				//   response为返回数据
				//3. DOM操作
				dialogRobot(response, txt);
				$(document).scrollTop(content.outerWidth());
				input.val("");
			}
		})
	}
	// 3.DOM操作，显示用户的输入
	function dialogUser(userMsg) {
		var originContent = content.html();
		var userHtml = '<div class="user">'
							+'<div>'
								+'<p>我说：</p>'
								+'<div class="msg">'+userMsg+'</div>'
							+'</div>'
						+'</div>';

		content.html(originContent + userHtml);
	}
	// 3.DOM操作，显示机器人的回答并展示
	function dialogRobot(robotMsg, userMsg) {
		var originContent = content.html();
		var robotHtml = '<div class="robot">'
							+'<div>'
								+'<p>图灵聊天机器人说：</p>'
								+'<div class="msg">'+robotMsg.text+'</div>'
							+'</div>'
						+'</div>';

		if(robotMsg.url) {
			robotHtml = '<div class="robot">'
							+'<div>'
								+'<p>图灵聊天机器人说：</p>'
								+'<div class="msg">'+robotMsg.text+'<a href="'+robotMsg.url+'">'+userMsg+'</a></div>'
							+'</div>'
						+'</div>';
		}

		content.html(originContent + robotHtml);
	}

	//点击发送按钮，发起一个ajax请求
	sendBtn.on("click", sendAjax);

	// 点击enter键触发请求
	input.on("keydown", function(e) {
		if(e.keyCode == 13) {
			sendAjax();
			// sendBtn.click();事件模拟
		}
	})

	</script>
</body>
</html>